<template>
    <div>
        <div class="box">
            <el-row :gutter="16">
                <el-col :span="12" >
                    <div class="gas-item">
                        <el-progress class="progress-warp CH" type="circle" :width="70" :percentage="dataSource.CH4?.percentage" :stroke-width="6" :color="(percentage)=>customColorMethod(percentage,dataSource.CH4.rule)"></el-progress>
                        <div class="progress-text">
                            <div class="name">
                                <span>CH4</span> 
                                <span style="font-size: 1vh;">（{{$t('confinedSpace.global.CH4')}}）</span>
                            </div>
                            <span class="num">{{numberToCurrencyNo(dataSource.CH4.data)}}</span>
                            <span class="unit">{{$t('confinedSpace.global.unit')}}：%VOL</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="gas-item">
                        <el-progress class="progress-warp HS" type="circle" :width="70" :percentage="dataSource.H2S?.percentage" :stroke-width="6" :color="(percentage)=>customColorMethod(percentage,dataSource.H2S.rule)"></el-progress>
                        <div class="progress-text">
                            <div class="name">
                                <span>H2S</span> 
                                <span style="font-size: 1vh;">（{{$t('confinedSpace.global.H2S')}}）</span>
                            </div>
                            <span class="num">{{numberToCurrencyNo(dataSource.H2S.data)}}</span>
                            <span class="unit">{{$t('confinedSpace.global.unit')}}：PPM</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="gas-item">
                        <el-progress class="progress-warp CO" type="circle" :width="70" :percentage="dataSource.CO?.percentage" :stroke-width="6" :color="(percentage)=>customColorMethod(percentage,dataSource.CO.rule)"></el-progress>
                        <div class="progress-text">
                            <div class="name">
                                <span>CO</span> 
                                <span style="font-size: 1vh;">（{{$t('confinedSpace.global.CO')}}）</span>
                            </div>
                            <span class="num">{{numberToCurrencyNo(dataSource.CO.data)}}</span>
                            <span class="unit">{{$t('confinedSpace.global.unit')}}：PPM</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="gas-item">
                        <el-progress class="progress-warp O2" type="circle" :width="70" :percentage="dataSource.O2?.percentage" :stroke-width="6" :color="(percentage)=>customColorMethod(percentage,dataSource.O2.rule)"></el-progress>
                        <div class="progress-text">
                            <div class="name">
                                <span>O2</span> 
                                <span style="font-size: 1vh;">（{{$t('confinedSpace.global.O2')}}）</span>
                            </div>
                            <span class="num">{{numberToCurrencyNo(dataSource.O2.data)}}</span>
                            <span class="unit">{{$t('confinedSpace.global.unit')}}：%VOL</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <svg width="0%" height="0%" style="position: absolute;">
        <!-- 渐变颜色一 通过id获取  -->
            <defs>
            <linearGradient id="CH" x1="0" y1="1" x2="1" y2="0.8">
                <stop offset="0%" style="stop-color:#FF8D8D;stop-opacity:0.8" />
                <stop offset="100%" style="stop-color:#D31D1D; stop-opacity:1" />
            </linearGradient>
            </defs>
        <!--  渐变颜色二 通过id获取 -->
            <defs>
            <linearGradient id="HS"  x1="0" y1="1" x2="0.8" y2="0.4">
                <stop offset="0%" style="stop-color: #87F46C; stop-opacity:0.8" />
                <stop offset="100%" style="stop-color: #38C914;stop-opacity:1" />
            </linearGradient>
            </defs>
            <defs>
            <linearGradient id="CO"  x1="0" y1="1" x2="0.8" y2="0.4">
                <stop offset="0%" style="stop-color: #FFED55; stop-opacity:0.8" />
                <stop offset="100%" style="stop-color: #FFED55;stop-opacity:1" />
            </linearGradient>
            </defs>
            <defs>
            <linearGradient id="O2" x1="0" y1="1" x2="1" y2="0.8">
                <stop offset="0%" style="stop-color:#FF8D8D;stop-opacity:0.8" />
                <stop offset="100%" style="stop-color:#D31D1D; stop-opacity:1" />
            </linearGradient>
            </defs>
        </svg>
        <!-- 1212 -->
    </div>
</template>
<script>
import { numberToCurrencyNo } from '@/utils/numberToCurrencyNo'
export default {
    props:{
        dataSource: {
            type:Object,
            default: () => {}
        }
    },
    data() {
        return {
            numberToCurrencyNo,
            percentage: 90
        }
    },
    methods: {
        customColorMethod(percentage,rule) {
            console.log(percentage,rule)
            if(rule && rule.indexOf("&&")>-1){
                const [condition1, condition2] = rule.split(' && '); // 分割出两个条件
                if (condition1.indexOf('>')>-1) {
                    const thresholds = parseFloat(condition1.replace('>=',''));
                    const thresholds2 = parseFloat(condition2.replace('<=',''));
                    if (percentage <= thresholds2) {
                        return '#D41E1E';
                    } else if (percentage < thresholds) {
                        return '#EAD408';
                    } else {
                        return '#19CA88';
                    }
                }else{
                    const thresholds = parseFloat(condition1.replace('<=',''));
                    const thresholds2 = parseFloat(condition2.replace('>=',''));
                    if (percentage <= thresholds) {
                        return '#19CA88';
                    } else if (percentage < thresholds2) {
                        return '#EAD408';
                    } else {
                        return '#D41E1E';
                    }
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
// ::v-deep .progress-warp {
//     svg>path:nth-child(1) {
//         stroke: transparent; 
//     }
//     &.CH svg>path:nth-child(2) {
//         stroke: url(#CH); 
//     }
//     &.HS svg>path:nth-child(2) {
//         stroke: url(#HS); 
//     }
//     &.CO svg>path:nth-child(2) {
//         stroke: url(#CO); 
//     }
//     &.O2 svg>path:nth-child(2) {
//         stroke: url(#O2); 
//     }
//     .el-progress__text{
//         font-size: 0.782vw !important;
//     }
// }
.item{
    display: flex;
    margin: 12px 0;
    align-items: center;
}
.progress-text{
    display: flex;
    flex-direction: column;
    margin-left: 1vw;
    // justify-content: space-between;
    font-size: 0.73vw;
    font-weight: bold;
    .name{
        span{
            font-size: 1.3vh;
        }
    }
    .num{
        font-size: 2.68vh;
        color: #1D5ED3;
    }
    .unit{
        color: #888;
        font-size: 1.087vh;
    }
}
::v-deep .progress-warp{
    .el-progress-circle{
        width: 6.9vh !important;
        height: 6.9vh !important;
    }
    .el-progress__text{
        font-size: 1.3vh !important;
    }
}
.gas-item{
    align-items: center;
    display: flex;
    padding: 1.4vh 5px;
    // background: #f5f5f5;
}
</style>